<script setup lang="ts">
import bmap from "@/utils/common/bmap-wx.min.js";
import { ref } from "vue";

const BMap = new bmap.BMapWX({
    ak: 'jFSoVQLN1MnUpgx87Q0e16aRGoQSIwCn',
});
const fail = (data: any) => {
    // 处理失败情况
};
const mapData = ref({
    markers: {},
    longitude: [],
    latitude: []
})
const success = (data: { wxMarkerData: any }) => {
    mapData.value.markers = data.wxMarkerData;
    mapData.value.longitude = data.wxMarkerData;
    mapData.value.latitude = data.wxMarkerData;
}
// 发起geocoding检索请求 
BMap.geocoding({
    address: "北京市海淀区上地十街10号",
    fail: fail,
    success: success,
});

</script>


<template>
    <view class="map_container">
        <map class="map" id="map" style="width: 100%; height: 300px;" :longitude="mapData.longitude"
            :latitude="mapData.latitude" scale="14" :show-location="true" bindmarkertap="makertap"></map>
    </view>
    <view class="rgc_info">
        <text>经度：{{ mapData.longitude }}</text>
        <text>纬度：{{ mapData.latitude }}</text>
    </view>

</template>

<style>
.map_container {
    height: 420px;
    width: 100%;
}

.map {
    height: 100%;
    width: 100%;
}

.rgc_info {
    padding: 5px;
}

.rgc_info {
    display: block;
}
</style>